<template>
	<view class="page">
		<u-navbar leftIconSize='30rpx' title="订单详情" @leftClick="$utils.back()" :placeholder="true" boder>
		</u-navbar>
		<view class="body">
			<scroll-view scroll-y="true" style="height: 100%;">

				<view class="Skeleton " style="height: 60rpx;width: 200rpx;margin:20rpx auto;" v-if="loading" />
				<view class="viewWidth statusTitle mt20" v-else>
					{{detail.status_text}}
				</view>
				<view class="infoBox flex mt20 viewWidth">
					<u-icon name='map' size="30rpx" />
					<view class="ml20" style="flex: 1;">
						<template v-if="loading">
							<view v-for="item in 2" :key="item" class="mt20 Skeleton"
								style="height: 30rpx;width: 100%;" />
						</template>
						<template v-else>
							<view class="flex">
								<view>
									<u-text lines='1' :text='detail.address.name' size='24rpx' />
								</view>
								<view>,</view>
								<view>
									<u-text :text='detail.address.phone' size='24rpx' />
								</view>
							</view>
							<view class="mt20">
								<u-text lines='1' :text='detail.address.address_district' size='24rpx' />
							</view>
						</template>
					</view>
					<view @click='jumpAddress' class="but" v-if="!loading&&detail.status_text=='未支付'&&detail.status_text=='未发货'">
						修改地址
					</view>
				</view>
				<view class="infoBox  mt20 viewWidth">
					<view class="flex" v-if='loading'>
						<view style="width: 40rpx;height: 40rpx;border-radius: 8rpx;" class="Skeleton" />
						<view class="Skeleton ml20" style="height: 30rpx;flex: 1;" />
					</view>
					<view class="flex" v-else>
						<u-avatar size='40rpx' shape="square" :src='user.avatar' />
						<view class="ml20">
							<u-text lines='1' :text='user.nick_name' size='24rpx' />
						</view>
					</view>
					<view class="flex mt20" style="align-items: flex-start;" v-if="loading">
						<view style="width: 150rpx;height: 150rpx;border-radius: 8rpx;" class="Skeleton" />
						<view style="flex: 1;" class="ml20">
							<view class="Skeleton mb20" style="height: 30rpx;" v-for="item in 3" :key="item" />
						</view>
						<view class="ml20">
							<view class="Skeleton " style="height: 30rpx;" />
						</view>
					</view>
					<view class="flex mt20" style="align-items: flex-start;" v-else>
						<image class="mr10" :src="detail.goods[0].goods_thumb" />
						<view style="flex: 1;">
							{{detail.goods[0].goods_name}}
						</view>
						<view>
							<u-text :text='detail.goods[0].goods_charge' mode="price" />
						</view>
					</view>
					<view class="flex mt20" style="justify-content: flex-end;" v-if='loading'>
						<view class="Skeleton " style="height: 30rpx;width: 200rpx;" />
					</view>
					<view class="flex mt20" style="justify-content: flex-end;" v-else>
						共1件商品,合计<view>
							<u-text size='24rpx' :text='detail.goods[0].goods_charge' mode="price" />
						</view>
					</view>
				</view>
				<view class="infoBox  mt20 viewWidth flex" style="align-items: flex-start;">
					<view v-if="loading" style="flex: 1;">
						<view class="Skeleton " style="height: 30rpx;width: 200rpx;" />
						<view class="Skeleton mt20" style="height: 30rpx;" v-for="item in 8" :key="item" />
					</view>
					<template v-else>
						<view class="mr20">
							<view class="fsz_28">
								订单信息
							</view>
							<view class="mt20 fsz_28" style="color: #bbb;">
								订单编号
							</view>

							<view class="mt20 fsz_28" style="color: #bbb;">
								下单时间
							</view>

							<view class="mt20 fsz_28" style="color: #bbb;">
								支付方式
							</view>

							<view class="mt20 fsz_28" style="color: #bbb;">
								支付时间
							</view>
							<view class="mt20 fsz_28" style="color: #bbb;">
								技术服务费
							</view>
							<view class="mt20 fsz_28" style="color: #bbb;">
								发货时间
							</view>
							<view class="mt20 fsz_28" style="color: #bbb;">
								签收时间
							</view>
						</view>
						<view style="flex: 1;">
							<view style="color: #fff;">
								订单信息
							</view>
							<view class="mt20 flex">
								<view class="fsz_28" style="flex: 1;">
									{{detail.order_id}}
								</view>
								<view @click='copy' style="color:rgb(66, 83, 216);">
									复制
								</view>
							</view>

							<view class="mt20 fsz_28">
								{{ detail.created_at | dateFormat}}
							</view>

							<view class="mt20 fsz_28">
								微信支付
							</view>

							<view class="mt20 fsz_28">
								支付时间
							</view>
							<view class="mt20 fsz_28">
								￥0.00
							</view>
							<view class="mt20 fsz_28">
								暂无
							</view>
							<view class="mt20 fsz_28">
								暂无
							</view>
						</view>
					</template>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {
					address: {}
				},
				loading: true,
				user: {},
				op:null
			}
		},
		onLoad(op) {
			this.op=op
			this.$api.Order.Detail(op.id).then(res => {
				this.detail = res.data.order
				this.user = res.data.user
				this.loading=false
			})
		},
		methods: {
			jumpAddress() {
				uni.redirectTo({
					url: '/product/selectAddress?id=' + this.op.id + '&address_id=' + this.detail.address_id+ '&type=put'
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.detail.order_id, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.$u.toast('已复制到粘贴板')
					}
				});
			},
			desensitizePhoneNumber(phoneNumber) {
				// 获取手机号长度
				const length = phoneNumber.length;

				// 如果手机号长度小于等于7，则无需脱敏，直接返回原始手机号
				if (length <= 7) {
					return phoneNumber;
				}

				// 取出前三位
				const firstThree = phoneNumber.substring(0, 3);
				// 取出后四位
				const lastFour = phoneNumber.substring(length - 4);
				// 构造脱敏字符串，中间四位用 "*" 替换
				const middle = "*".repeat(length - 7);

				// 组合成脱敏后的手机号
				const desensitizedPhoneNumber = firstThree + middle + lastFour;

				return desensitizedPhoneNumber;
			},
		}
	}
</script>

<style scoped lang="scss">
	.fsz_28 {
		font-size: 28rpx;
	}

	.page {
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
	}

	.body {
		flex: 1;
		overflow: hidden;
	}

	.statusTitle {
		text-align: center;
		font-size: 50rpx;
	}







	.mr10 {
		margin-right: 10rpx;
	}

	.infoBox {
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
	}

	.flex {
		align-items: center;
		display: flex;
	}

	image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
	}
	.but{
			border-radius: 100rpx;
			padding: 10rpx;
			border: 1rpx solid #bbb;
		}
</style>